<template>
  <div class="rf-upload-file">
    <el-upload class="upload" ref="upload" :action="url" :on-success="handleMoreSuccess" :on-preview="handlePreview"
      :on-exceed="handleExceed" :on-remove="handleRemove" :file-list="fileList" :auto-upload="autoUpload"
      :limit="limit">
      <el-button slot="trigger" type="primary">
        {{btnText}}</el-button>
      <el-button v-if="!autoUpload" style="margin-left: 10px;" type="success" @click="submitUpload">{{$t('上传服务器')}}
      </el-button>
      <span v-if="tip" slot="tip" class="el-upload__tip">{{tip}}</span>
    </el-upload>
  </div>
</template>
<script>
  import api from '../../../../utils/api'
  export default {
    name: 'RfUploadFile',
    props: {
      limit: {
        type: [String, Number],
        default: 10
      },
      autoUpload: {
        type: Boolean,
        default: false
      },
      tip: {
        type: String,
        default: ''
      },
      btnText: {
        type: String,
        default: '选择文件'
      }
    },
    data () {
      return {
        fileList: [],
        url: api.uploadUrl()
      }
    },
    methods: {
      submitUpload () {
        this.$refs.upload.submit()
      },
      handleRemove (file, fileList) {
        console.log(file, fileList)
      },
      handlePreview (file) {
        console.log(file)
      },
      handleExceed () {
        this.$message.warning(this.$t(`不能上传超过${this.limit}个文件`))
      },
      // 上传成功操作
      handleMoreSuccess (response, file, fileList) {
        if (!this.autoUpload) {
          this.$refs.upload.clearFiles()
        }
        this.$emit('cb', response.data)
      }
    },
    mounted () {

    }
  }
</script>
<style lang="scss">
  .el-upload__tip {
    margin-left: 10px;
  }
</style>